<template>
  <div>
    <div class="reDiscuss">
      <img :src="promulgatorSrc"/><br/>
      <span>{{promulgator}}</span>
      <div class="content-block">
        <span>{{content}}</span>
        <span class="date">{{date}}</span><br/>
        <span class="re" @click="response">回复</span>
      </div>
    </div>
    <form v-if="isResponse">
      <textarea ref="reContent"></textarea><br/>
      <button @click="submit">提交</button>
    </form>
  </div>
</template>

<script>
const responseData = {
  promulgatorSrc: '../../static/userlogo.jpg',
  promulgator: '老大',
  content: '跟我组队呀',
  date: '2017-8-7'
}
export default {
  name: 'reDiscuss',
  data: function () {
    return {
      promulgatorSrc: responseData.promulgatorSrc,
      promulgator: responseData.promulgator,
      content: responseData.content,
      date: responseData.date,
      isResponse: false
    }
  },
  methods: {
    response: function () {
      this.isResponse = true
    },
    submit: function () {
      let value = this.$refs.reContent.value
      console.log(value)
      this.isResponse = false
    }
  }
}
</script>

<style scoped>
.reDiscuss {
    background-color: white;
    margin: 0.3rem 0;
    box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.5);
    width: 100%;
    padding: 0.3rem;
    box-sizing: border-box;
    border-radius: 0.2rem;
    position: relative;
    text-align: left;
}
.reDiscuss>span {
    display: inline-block;
    font-size: 0.4rem;
    margin-left: 0.5rem;
}
img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}
.content-block {
    display: inline-block;
    width: 5.6rem;
    border-left: 1px solid #b7b7b7;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding-left: 0.3rem;
    height: 2.3rem;
}
.content-block span {
    font-size: 0.4rem;
    display: inline-block;
}
.date {
    margin-left: 1.7rem;
    color: #e51c23;
}
.re {
    float: right;
    margin: 0.3rem 0.3rem 0 0;
    color: #5677fc;
}
textarea {
    width: 95%;
    height: 4rem;
    box-sizing: border-box;
    margin: 0.1rem 0.3rem;
    padding: 0.2rem;
    font-size: 0.4rem;
}
button {
    width: 95%;
    height: 1rem;
    margin: 0 0.3rem;
    border-radius: 0.2rem;
    background-color: #388e3c;
    border: none;
    font-size: 0.4rem;
    color: white;
}
</style>
